import React, {useState} from 'react';
import {
    Button,
    Col,
    Form,
    Input, Modal,
    Row,
    theme,
} from 'antd';

const AccountDetail: React.FC<{
    onSearch: (values: any) => void,
    onOk: () => void,
    onCancel: () => void,
    open: boolean
    title: string
}> = (props) => {

    const {token} = theme.useToken();
    const [form] = Form.useForm();

    const formStyle = {
        maxWidth: 'none',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        padding: 24,
        marginBottom: '20px'
    };

    const formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 14}};

    const onFinish = (values: any) => {
        props.onSearch(values);
    };

    return (
        <Modal title={props.title}
               open={props.open}
               onOk={() => props.onOk()}
               onCancel={() => props.onCancel()}
               width={"60%"}>

            <Form
                {...formItemLayout}
                form={form} style={formStyle} onFinish={onFinish} labelAlign={"right"}>
                <Row gutter={24}>

                    <Col span={20} offset={2}>
                        <Form.Item name="platform" label="平台">
                            <Input placeholder="请输入平台名称"/>
                        </Form.Item>
                    </Col>

                    <Col span={20} offset={2}>
                        <Form.Item name="hostIp" label="执行主机IP">
                            <Input placeholder="请输入 IP 地址"/>
                        </Form.Item>
                    </Col>

                    <Col span={20} offset={2}>
                        <Form.Item name="module" label="模块">
                            <Input placeholder="请输入模块名称"/>
                        </Form.Item>
                    </Col>

                    <Col span={20} offset={2}>
                        <Form.Item name="url" label="URL地址">
                            <Input placeholder="请输入URL地址"/>
                        </Form.Item>
                    </Col>

                    <Col span={20} offset={2}>
                        <Form.Item name="user" label="用户">
                            <Input placeholder="请输入执行用户"/>
                        </Form.Item>
                    </Col>

                    <Col span={20} offset={2}>
                        <Form.Item name="user" label="用户IP地址">
                            <Input placeholder="请输入用户 IP 地址"/>
                        </Form.Item>
                    </Col>

                </Row>
            </Form>
        </Modal>
    );
};

export default AccountDetail